<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车计数器</title>
</head>
<body>
    <h2>购物车计数器,商品库存为10</h2>
    <span>商品单价:<span id="price">9.9</span></span>
    <button id="dec" onclick="sub()">-</button>
    <span id="num">1</span>
    <button id="inc" onclick="add()">+</button>
    <span>小计:<span id="total">9.9</span></span>
</body>
<script>
    let num=document.querySelector("#num");
    let price=document.querySelector("#price");
    let total=document.querySelector("#total");
    let inc=document.querySelector("#inc");
    let dec=document.querySelector("#dec");
    function sub(){        
        let n=num.innerHTML;
        n--;
        num.innerText=n;
        if(n<=1){
            dec.disabled=true;
        }        
        inc.disabled=false;
        cal(n);
    }
    function add(){
        let n=num.innerHTML;
        n++;
        num.innerText=n;
        if(n>=10){
            inc.disabled=true;
        }       
        dec.disabled=false;
        cal(n);
    }
    function cal(n){
        total.innerHTML=(n*price.innerText).toFixed(2);
    }
</script>
</html>